<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="net.pws.oos.security.SecurityUtils"%>
<%@ include file="../../../header.jsp"%>

<link rel="stylesheet" href="<%=ctx%>/js/bootstrap-calendar/css/calendar.css">
<div class="border bg">
	<div class="page-header">
		<h2>考勤管理 <small>${userName}</small></h2>
		<div class="cms_toolbar">
			<% if(SecurityUtils.allowedResource("/ot/checkin/manage")){ %>
			<a id="_create_item_action" href="#" class="btn" onclick="selectExecutePerson()"><i class="icon-user"></i>切换人员</a>
			<%} %>
		</div>
	</div>

	<div class="page-header">
		<div class="pull-right btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-primary" data-calendar-nav="prev"><< </button>
				<button class="btn" data-calendar-nav="today">今天</button>
				<button class="btn btn-primary" data-calendar-nav="next"> >></button>
			</div>
			<!-- 
			<div class="btn-group">
				<button class="btn btn-warning active" data-calendar-view="month">月</button>
				<button class="btn btn-warning" data-calendar-view="week">周</button>
				<button class="btn btn-warning" data-calendar-view="day">日</button>
			</div>
			 -->
		</div>
		<h3></h3>
	</div>

	<div id="calendar"></div>

	<div class="clearfix"></div>
	<br><br>
	<div id="disqus_thread"></div>


</div>

<script type="text/javascript" src="<%=ctx%>/js/bootstrap-calendar/js/underscore-min.js"></script>
<script type="text/javascript" src="<%=ctx%>/js/bootstrap-calendar/js/language/zh-CN.js"></script>
<script type="text/javascript" src="<%=ctx%>/js/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript">
function selectExecutePerson() {
	$.openDialog("#dialog", {
		height:350,
		width:300,
		minHeight:350,
		minWidth:300,
		loadPage:ctx + "/biz/system/user/tree.jsp",
		title:"选择勘察人员"},
		function(data) {
			var url = "calendar.do?userId=" + data.data("id");
			location.href = url;
		});
}

function initCalendar() {
	var options = {
			events_url: 'list.json?userId=${userId}',
			view: 'month',
	        //day: '2013-05-20',
			first_day: 2,
			tmpl_path:ctx + '/js/bootstrap-calendar/tmpls/',
			onAfterEventsLoad: function(events) {
			},
			onAfterViewLoad: function(view) {
				$('.page-header h3').text(this.title());
				$('.btn-group button').removeClass('active');
				$('button[data-calendar-view="' + view + '"]').addClass('active');
			},
			classes: {
				months: {
					general: 'label'
				}
			}
		};

	var calendar = $('#calendar').calendar(options);

	$('.btn-group button[data-calendar-nav]').each(function() {
		var $this = $(this);
		$this.click(function() {
			calendar.navigate($this.data('calendar-nav'));
		});
	});

	$('.btn-group button[data-calendar-view]').each(function() {
		var $this = $(this);
		$this.click(function() {
			calendar.view($this.data('calendar-view'));
		});
	});
}

$(document).ready(function() {
	initCalendar();
});
</script>


<%@ include file="../../../footer.jsp"%>